<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>奖牌首页</title>
    <style type="text/css">
        body{
            width: 366px;
            /* height: 634px; */
        }
        #d1{
            width: 366px;
            height: 634px;
            border: solid 1px darkgray;
            border-radius: 10px;
        }
        #d2{
            width: 366px;
            height: 150px;
        }
        #d2 img{
            width: 366px;
            height: 150px;
        }
        #d2 h2{
            position: relative;
            top: -140px;
            left: -50px;
            color: white;
        }
        #d2 h5{
            position: relative;
            top: -150px;
            left: -70px;
            color: white;
        }
        #d3{
            margin-top: -10px;
            width: 340px;
            height: 110px;
            background-color: aquamarine;
            border-radius: 9px;
        }
        #d3 span>img{
            margin-top: -15px;
            margin-left: 30px;
        }
        #d3 span font{
            position: relative;
            left: 10px;
            top: -10px;
        }
        #d4{
            margin-top: 10px;
            width: 340px;
            height: 350px;
            background-color: aquamarine;
            border-radius: 9px;
        }
        /* #d4 ul li{
            list-style: none;
            margin-left: -250px;
            margin-top: 20px;
        }
        #d4 ul li img{
            width: 30px;
            height: 20px;
            position: relative;
            top: 5px;
            left: 5px;
        } */
        #d4 table tr{
            margin-top: 10px;
        }
        #d4 table tr td a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div style="display: inline-block;position: relative;left: 30rem">
<center>
    <div id="d1">
        <div id="d2">
            <img src="https://search-operate.cdn.bcebos.com/f94480f1dd0c5d625da8d12b77c481df.jpeg" >
            <h2>北京2022年冬奥会</h2>
            <h5>2022.02.04-2022.02.20</h5>
        </div>

        <div id="d3">
            <h2>中国第<span style="color: red;">3</span>名</h2>
            <h5 style="margin-top: -17px;">2022年冬奥会奖牌榜</h5>
            <div style="margin-left: -40px;">
                <span><img src="https://search-operate.cdn.bcebos.com/87f7f3765960ea9ff14780cf3d3aed37.png" style="width: 45px;height: 45px;"><font size="5" color="darkgoldenrod">9</font></span>
                <span><img src="https://search-operate.cdn.bcebos.com/5f5b01f7473cf1f9058918f13bbe75cb.png" style="width: 45px;height: 45px;"><font size="5" color="darkgoldenrod">9</font></span>
                <span><img src="https://search-operate.cdn.bcebos.com/b9600bc4ebb1cbe5bd35a97af3cfc777.png" style="width: 45px;height: 45px;"><font size="5" color="darkgoldenrod">9</font></span>
            </div>

        </div>

        <div id="d4">
            <!-- <span style="font-size: 20px; color: white;position: relative;left: -50px;">排名</span>
            <span style="font-size: 20px; color: white;position: relative;left: 50px;">金牌 银牌 铜牌 总计</span> -->
            <!-- <ul>
                <li style="color: red;">①<img src="https://search-operate.cdn.bcebos.com/f6486586ef8546849471effd1f905ae4.png"></li>
                <li style="color: coral;">②</li>
                <li style="color: orange">③</li>
                <li>④</li>
                <li>⑤</li>
            </ul> -->
            <table cellspacing="15">
                <tr>
                    <td width="40px">排名</td>
                    <td width="40px">国家</td>
                    <td width="40px">金牌</td>
                    <td width="40px">银牌</td>
                    <td width="40px">铜牌</td>
                    <td width="40px">总计</td>
                </tr>
                <c:forEach items="${list}" var="item" varStatus="s">
                <tr>
                    <td>${s.count}</td>
                    <td style="color: red;"><a href="country.jsp?countryCode=${item.countryCode}"><img style="width: 2rem;height: 2rem" src="admin/down.let?file=${item.getCountryUri()}"/>${item.countryName}</a></td>
                    <td>${item.first}</td>
                    <td>${item.second}</td>
                    <td>${item.thirdly}</td>
                    <td>${item.total}</td>
                </tr>
                </c:forEach>
            </table>
        </div>
    </div>
</center>
</div>
</body>
</html>

